<template>
  <div class="masklayer">
    <div class="masklayer-box">
      <i class="iconfont icon-guanbi close" @click="close"></i>
      <div class="must">*</div>
      <textarea maxlength="200" v-model="textVal" placeholder="请输入反馈，我们将为您不断改进" @focus="put" :class="{'bor': putbox}"></textarea>
      <div style="position: absolute;bottom: 250px;right: 50px;color: #aaadaf;">还可以输入{{words}}个字</div>
      <input maxlength="100" v-model="inputVal" type="text" placeholder="请输入手机/邮箱" @focus="area" :class="{'bor': active}">
      <button @click="submitInfo">提交</button>
      <p class="tips">{{tips}}</p>
    </div>
  </div>
</template>

<script>
  import request from '../../api/request'
  export default {
    name: 'masklayer',
    data () {
      return {
        active: false,
        putbox: false,
        textVal: '',
        inputVal: '',
        tips: '',
        words: 200
      }
    },
    methods: {
      area () {
        this.active = true
        this.putbox = false
      },
      put () {
        this.putbox = true
        this.active = false
      },
      close () {
        this.$emit('close')
      },
      submitInfo () {
        let params = {
          suggestion: this.textVal,
          email: this.inputVal
        }
        if (params.suggestion.replace(/(^\s*)|(\s*$)/g, '') === '') {  // 去掉所有空格再判断是否为空
          this.tips = '请输入反馈信息'
        } else {
          this.tips = ''
          request.post('feedback', params).then((response) => {
            if (response.data.code === '200') {
              this.$emit('success')
            }
          })
        }
      }
    },
    watch: {
      textVal (val) {
        this.textVal = val
        this.words = 200 - val.length
        if (this.textVal.length === 200) {
          this.tips = '反馈信息最多200个字哦'
        }
        if (val) {
          this.tips = ''
        }
      },
      inputVal (val) {
        this.inputVal = val
      }
    }
  }
</script>

<style lang="scss">
.masklayer{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  .masklayer-box{
    width: 500px;
    background: white;
    position: absolute;
    bottom: calc(50% - 250px);
    right: calc(50% - 210px);
    padding: 60px 40px 20px 40px;
    .must{
      color: red;
      font-size: 20px;
      position: absolute;
      left: 23px;
      top: 60px;
    }
    .tips{
      color: red;
      margin-top: 20px;
      height: 20px;
      text-align: center;
    }
    .close{
      position: absolute;
      right: 20px;
      top: 15px;
      font-size: 24px;
      color: #cccccc;
      cursor: pointer;
      &:hover{
        color: black;
      }
    }
    textarea{
      height:190px;
      min-height: 190px;
      max-height: 190px;
      width:420px;
      border: 1px solid #f0f0f0;
      padding: 10px;
      overflow-y: hidden;
    }
    textarea::-webkit-input-placeholder{
      color: #bbbbbb;
      font-size: 18px;
    }
    input{
      width: 100%;
      height: 60px;
      padding-left: 20px;
      margin-top: 20px;
      border: 1px solid #f0f0f0;
    }
    .bor{
      border-color: #00ba91;
      box-shadow: 0 0 1px 1px rgba(0,186,145,.2);
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    input::-webkit-input-placeholder{
      color: #bbbbbb;
      font-size: 16px;
    }
    button{
      display: block;
      margin: 50px auto 0;
      width: 150px;
      height: 50px;
      background: #00ba91;
      border-radius: 5px;
      border: none;
      font-size: 18px;
      color: white;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  }
}
</style>
